<template>
  <div class="drawer-layout">
    <el-drawer :title="detailTitle?detailTitle:'编辑'" :visible.sync="drawer" @closed="closedinvitation" size="85%"
      :wrapperClosable="false">
      <div class="layout" style="position: relative" v-loading="loading">
        <el-tabs v-model="activeName">
          <el-tab-pane label="活动基本配置" name="first">
            <el-form ref="basic" label-position="left" :inline="true" :model="basic" size="small" :rules="basicrules">
              <div class="blockquote-box">基本信息</div>
              <div class="form-box">
                <el-form-item label="活动名称" prop="sign_name" class="form-box-item">
                  <el-input clearable maxlength="20" show-word-limit placeholder="请输入活动名称" v-model="basic.sign_name">
                  </el-input>
                </el-form-item>
                <el-form-item label="活动时间" prop="basicTime" class="form-box-item">
                  <el-date-picker clearable value-format="yyyy-MM-dd" @change="basicTimeChange" v-model="basicTime"
                    type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <br>
                <el-form-item label="活动状态" prop="status" class="form-box-item">
                  <el-select v-model="basic.status" placeholder="请选择状态">
                    <el-option v-for="item in status" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>

            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button @click="basic_information('basic', 'second')" class="next-button">下一步 <i
                  class="el-icon-caret-right el-icon--right"></i></el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="适用范围" name="second">
            <el-form label-position="left" :inline="true" :model="range" ref="range" size="small" :rules="rangerules">
              <div class="blockquote-box">适用范围</div>
              <div class="form-box">
                <el-form-item label="适用区域" class="form-box-item">
                  <el-cascader placeholder="全部" filterable @change="regionChangeWay" v-model="range.appoint_area_select"
                    style="width: 100%" :options="regionList" collapse-tags :props="{
            expandTrigger: 'hover',
            multiple: true,
            value: 'id',
            label: 'name',
            children: 'children',
            checkStrictly: false,
            emitPath: true,
        }" clearable></el-cascader>
                </el-form-item>
                <el-form-item label="用户分组" class="form-box-item">
                  <el-select @change="selectChangeWay('appoint_group_select')" v-model="range.appoint_group_select"
                    multiple clearable collapse-tags placeholder="全部">
                    <el-option v-for="item in groupingList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="用户等级" class="form-box-item">
                  <el-select @change="selectChangeWay('appoint_level_select')" v-model="range.appoint_level_select"
                    multiple clearable collapse-tags placeholder="全部">
                    <el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="用户标签" class="form-box-item">
                  <el-select clearable @change="selectChangeWay('appoint_tag_select')" style="width: 100%"
                    v-model="range.appoint_tag_select" multiple collapse-tags placeholder="全部">
                    <el-option-group v-for="group in TagCategoryAll" :key="group.category_name"
                      :label="group.category_name">
                      <el-option v-for="item in group.child" :key="item.id" :label="item.tag_name" :value="item.id">
                      </el-option>
                    </el-option-group>
                  </el-select>
                </el-form-item>

              </div>
              <div class="blockquote-box">可参与活动的用户</div>
              <div class="form-box">
                <div class="table-top">
                  <div class="table-top-left">
                    <div>所有用户：{{ rangeCanJoinUsertotal }}</div>
                    <div>黑名单用户：{{ joinblackIds.length }}</div>
                    <div>重复用户：{{ rangeHasJoinUserTotal }}</div>
                  </div>
                  <div class="table-top-right">
                    <div>
                      <el-button style="height: 30px" type="primary" @click="addConfig('黑名单')" plain
                        size="small">配置黑名单</el-button>
                    </div>
                    <div>
                      <el-button style="height: 30px" type="primary" @click="addConfig('重复对象')" plain
                        size="small">配置重复</el-button>
                    </div>
                  </div>
                </div>
                <div>
                  <el-table v-loading="rangeCanJoinUserLoading" highlight-current-row :data="CanJoinUserList"
                    :header-cell-style="{
            'background-color': '#f3f8fe',
            color: '#606266',
            height: '50px',
        }" style="width: 100%">
                    <el-table-column align="center" prop="id" label="用户id"></el-table-column>
                    <el-table-column align="center" prop="nickname" label="用户昵称"></el-table-column>
                    <el-table-column align="center" prop="region" label="用户区域">
                      <template slot-scope="scope">
                        {{
            scope.row.province_name
                ? scope.row.province_name
                : "-"
        }}
                        {{ scope.row.city_name ? scope.row.city_name : "-" }}
                      </template>
                    </el-table-column>
                    <el-table-column width="200" align="center" prop="group" label="用户群组">
                      <template slot-scope="scope">
                        <!-- 用户群组：提示多个群组需要用分隔符区分，‘空格’+‘/’,超过三个显示超过的数量 -->
                        <el-tooltip class="item" effect="dark" :content="scope.row.group_name" placement="top">
                          <div v-if="scope.row.group_name" style="display: flex; justify-content: center">
                            <div>{{ scope.row.group_name }}</div>
                          </div>
                        </el-tooltip>
                        <div v-if="!scope.row.group_name">-</div>
                      </template>
                    </el-table-column>
                    <el-table-column width="200" align="center" prop="tag" label="用户标签">
                      <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" :content="scope.row.tag_name.join('/')" placement="top">
                          <div v-if="scope.row.tag_name.length !== 0" style="display: flex; justify-content: center">
                            <div v-if="index < 3" v-for="(item, index) in scope.row.tag_name" :key="index">
                              {{ item }} /
                            </div>
                            <div v-if="scope.row.tag_name.length > 3" class="table-num">
                              + {{ scope.row.tag_name.length }}
                            </div>
                          </div>
                        </el-tooltip>
                        <div v-if="scope.row.tag_name.length == 0">-</div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="status" label="参与状态"></el-table-column>
                    <el-table-column fixed="right" width="100" prop="address" label="操作" align="center">
                      <template slot-scope="scope">
                        <el-button type="text" @click="joinblack([scope.row])">
                          加入黑名单
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination v-show="rangeCanJoinUsertotal > 0" :total="rangeCanJoinUsertotal"
                    :page.sync="rangeCanJoinUserSearch.page" :limit.sync="rangeCanJoinUserSearch.count"
                    @pagination="getRangeCanJoinUserListWay" />
                </div>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button @click="activeName = 'first'" icon="el-icon-caret-left" class="next-button">上一步</el-button>
              <el-button @click="basic_information('range', 'third')" class="next-button">下一步 <i
                  class="el-icon-caret-right el-icon--right"></i></el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="签到规则" name="third">
            <el-form label-position="left" :model="taskForm" :inline="true" size="small" ref="taskForm"
              :rules="taskRules">
              <div class="blockquote-box">签到规则</div>
              <div class="form-box">
                <el-form-item required label="签到类型" class="form-box-item">
                  <el-radio v-model="radio" label="1">连续签</el-radio>
                </el-form-item>
                <br>
                <el-form-item prop="conversion_validity_day" label="积分转换卡领取后" class="form-box-item">
                  <el-input style="width: 120px;" placeholder="天数" v-model="taskForm.conversion_validity_day" />
                  <div class="form_text">天内有效</div>
                  <div class="form-tip">0为永久有效</div>
                </el-form-item>
              </div>
              <div class="blockquote-box">连续签规则</div>
              <div class="form-box" v-for="(item, index) in taskForm.rule" :key="index">
                <el-form-item prop="sing_day" label="签到天数" style="margin-top: 20px;" class="form-box-item">
                  <span>连续签</span>
                  <el-input style="width: 120px;margin-left: 8px;" placeholder="天数" v-model="item.sing_day" />
                  <div style="margin-right: 8px;" class="form_text">天</div>
                  <el-button v-if="index == taskForm.rule.length - 1" @click="pushAward_rule" type="primary"
                    icon="el-icon-plus" circle></el-button>
                  <el-button v-if="taskForm.rule.length > 1" type="danger" @click="delAward_rule(item)"
                    icon="el-icon-minus" circle></el-button>
                </el-form-item>
                <div style="background: #efefef;padding: 10px;">
                  <el-row>
                    <el-form-item label="奖励类型" label-width="120px" required class="form-box-item">
                      <el-checkbox-group v-model="item.reward_type" size="small">
                        <el-checkbox :label="1">积分</el-checkbox>
                        <el-checkbox :label="2">抽奖次数</el-checkbox>
                        <el-checkbox :label="3">积分转换卡</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                  </el-row>
                  <el-row>
                    <el-form-item label="赠送积分" label-width="120px" required class="form-box-item">
                      <el-input style="width: 120px;" placeholder="数量" type="number" min="0" v-model="item.integral_num" />
                    </el-form-item>
                  </el-row>
                  <el-row>
                    <el-form-item label="赠送抽奖次数" label-width="120px" required class="form-box-item">
                      <el-input style="width: 120px;" placeholder="数量" type="number" min="0" v-model="item.lottery_num" />
                    </el-form-item>
                  </el-row>
                  <el-row>
                    <el-form-item label="积分转换卡" label-width="120px" required class="form-box-item">
                      <el-input style="width: 120px;" placeholder="百分比" type="number" min="0" v-model="item.conversion_rate" />
                      <div class="form_text">%</div>
                      <div class="form-tip">（说明：请输入大于等于1的整数，默认每次只奖励一张积分转换卡）</div>
                    </el-form-item>
                  </el-row>
                </div>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button @click="activeName = 'second'" icon="el-icon-caret-left" class="next-button">上一步</el-button>
              <el-button @click="basic_information('configuration', 'fourth')" class="next-button">下一步 <i
                  class="el-icon-caret-right el-icon--right"></i></el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="活动说明" name="fourth">
            <el-form label-position="left" :inline="true" size="small">
              <div class="blockquote-box">活动简介&规则说明</div>
              <div class="form-box">
                <el-form-item label="活动简介" required class="form-box-item">
                  <el-input type="textarea" style="width: 500px;" :rows="10" placeholder="请输入内容" v-model="brief">
                  </el-input>
                </el-form-item>
                <el-form-item label="活动规则" required class="form-box-item">
                  <editor-text v-model="explain" :height="240" @input="editorclick" />
                </el-form-item>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button @click="activeName = 'third'" icon="el-icon-caret-left" class="next-button">上一步</el-button>
              <el-button class="next-button" @click="saveSubmit">保存</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>


    </el-drawer>
    <config ref="config" v-if="ifShowConfig" :userIds="userIds" :regionList="regionList" :groupingList="groupingList"
      :TagCategoryAll="TagCategoryAll" :gradeList="gradeList" :ConfigTitle="ConfigTitle" />
  </div>
</template>

<script>
  import config from "./config";
  import {
    rangeCanJoinUserList
  } from "@/api/index";
  import {
    SaveSign,
    getSignInfo,
    getSignList,
    delSign,
    SaveSignStatus,
    getAwardList,

  } from "@/api/activity/index";

  export default {
    name: 'drawer',
    props: [
      "detailTitle",
      "regionList",
      "groupingList",
      "TagCategoryAll",
      "gradeList",
    ],
    components: {
      config,
    },
    watch: {
      activeName: {
        handler(oldVal, newVal) {
          this.explainBool = true;
          this.getRangeCanJoinUserListWay();
        },
        deep: true,
      },
    },
    data() {
      return {
        radio: '1',
        activeName: "first", //默认第一步
        loading: false,
        drawer: true,
        status: [{
            name: "禁用",
            id: 2
          },
          {
            name: "开启",
            id: 1
          },
        ],
        // 基本信息
        basic: {
          sign_name: "", // 签到活动名称
          start_time: "", // 开启时间
          end_time: "", // 结束时间
          status: 2, //状态
        },
        // 基本信息时间段
        basicTime: [],
        //基本信息校验
        basicrules: {
          sign_name: [{
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (!value) {
                callback(new Error("请输入活动名称"));
              } else {
                if (req.test(value)) {
                  callback(new Error("活动名称中不能存在特殊字符"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          }, ],
          basicTime: [{
            required: true,
            validator: (rule, value, callback) => {
              if (this.basicTime.length == 0) {
                return callback(new Error("请选择活动的时间段"));
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
          status: [{
            required: true,
            validator: (rule, value, callback) => {
              callback();
            },
            trigger: "change",
          }, ],
        },
        // 适用范围搜索参数
        range: {
          appoint_area_select: [],
          appoint_group_select: [],
          appoint_tag_select: [],
          appoint_level_select: [],
          user_black: [], // 黑名单用户id
        },
        // 适用范围规则
        rangerules: {},
        // 满足条件的可参与用户列表
        CanJoinUserList: [],
        rangeCanJoinUserLoading: false, // 使用范围使用用户列表
        rangeCanJoinUsertotal: 0, // 使用范围使用用户列表总条数
        joinblackIds: [], // 黑名单id列表
        rangeHasJoinUserTotal: 0, // 重复用户数
        ifShowConfig: false, // 控制配置黑名单重复抽屉显示隐藏
        userIds: [], // 向配置黑名单重复抽屉传递的参数
        ConfigTitle: "", // 配置黑名单重复抽屉标题的参数
        // 获取重复参与活动用户列表
        rangeCanJoinUserSearch: {
          remove_activity_id: "", // 需要排除的活动ID（修改活动，需要传当前活动ID）
          appoint_area_select: "", // 选择的地区ID（市ID，多个以,分开）
          appoint_level_select: "", // 选择的用户等级ID（多个以,分开）
          appoint_group_select: "", // 选择的用户分组ID（多个以,分开）
          appoint_tag_select: "", // 选择的用户标签ID（多个以,分开）
          user_black: "", // 黑名单用户ID（多个以,分开）
          page: 1,
          count: 10,
        },
        //签到参数校验
        taskRules: {
          conversion_validity_day: [{
            required: true,
            validator: (rule, value, callback) => {
              let req = /^[0-9]*$/; // 正则表达式：只能是数字
              if (value === "") {
                callback(new Error("请输入签到天数"));
              } else if (!req.test(value)) {
                callback(new Error("只能输入正整数"));
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],

        },
        // 签到规则
        taskForm: {
          conversion_validity_day: '', //有效期
          rule: [ //连续签到规则
            {
              id: 0, //id
              sing_day: '', //签到天数
              reward_type: [1, 2, 3], //奖励类型
              integral_num: '', //赠送积分
              conversion_rate: '', //积分转换卡百分比
              lottery_num: '', //赠送抽奖次数
            },
          ],
        },
        // 活动规则
        explain: "",
        explainBool: false,
        //活动简介
        brief: "",
        editId:'',//编辑ID
      }
    },
    methods: {
      signdetails(e){
        this.editId = e.id
        e.sign_rule.forEach((item)=>{
          item.reward_type = item.reward_type.split(',').map(items => parseInt(items))
        })
        this.basic.sign_name = e.sign_name
        this.basic.status = e.status
        this.basicTime = [e.start_time,e.end_time]
        this.basic.start_time= e.start_time
        this.basic.end_time= e.end_time
        this.explain = e.explain
        this.brief = e.description
        this.taskForm.conversion_validity_day = e.conversion_validity_day
        this.taskForm.rule = e.sign_rule
      },
      editorclick(e) {
        this.explain = e;
      },
       //加入黑名单
    joinblack(row) {
      this.$confirm("确定要将用户添加到黑名单吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (row.length !== 0) {
            row.forEach((item) => {
              this.joinblackIds.push(item.id);
            });
          }
          this.rangeCanJoinUserSearch.user_black = this.joinblackIds.toString();
          this.getRangeCanJoinUserListWay();
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          this.userIds = this.joinblackIds;
          this.$refs.config.getList(this.joinblackIds);
        })
        .catch(() => {});
    },
    // 移除黑名单
    removeBlacklist(row) {
      var _this = this;
      _this
        .$confirm("确定要将用户移出黑名单吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          var arr = [];
          if (row.length !== 0) {
            row.forEach((item) => {
              arr.push(item.id);
            });
          } else {
            arr = [];
          }
          _this.joinblackIds = _this.getArrDifference(arr, _this.joinblackIds);
          _this.rangeCanJoinUserSearch.user_black =
            _this.joinblackIds.toString();
          _this.getRangeCanJoinUserListWay();
          _this.$message({
            type: "success",
            message: "移出成功!",
          });
          _this.userIds = _this.joinblackIds;
          _this.$refs.config.getList(_this.joinblackIds);
        })
        .catch(() => {});
    },
      // 关闭添加抽屉
      closedinvitation() {
        this.$parent.closedetail();
      },
      // 选择活动日期之后直接赋值
      basicTimeChange(val) {
        if (val.length !== 0) {
          this.basic.start_time = val[0];
          this.basic.end_time = val[1];
        } else {
          this.basic.start_time = "";
          this.basic.end_time = "";
        }
      },
      // 基本信息点击下一步调用
      basic_information(formName, activeName) {
        this.activeName = activeName;
      },
      // 获取可参与列表
      getRangeCanJoinUserListWay() {
        this.rangeCanJoinUserLoading = true;
        rangeCanJoinUserList(this.rangeCanJoinUserSearch).then((res) => {
          this.rangeCanJoinUserLoading = false;
          this.loading = false;
          if (res.code !== 200 || res.status !== 1) {
            this.$messages.error(res.msg);
            return;
          }
          this.CanJoinUserList = res.data.list;
          this.rangeCanJoinUsertotal = res.data.total;
        });
      },
      // 选择区域调用
      regionChangeWay(val) {
        var arr = [];
        val.forEach((item) => {
          arr.push(item[1]);
        });
        this.rangeCanJoinUserSearch.appoint_area_select = arr.toString();
        this.getRangeCanJoinUserListWay();
      },
      // 下拉框选择调用
      selectChangeWay(name) {
        if (name == "appoint_group_select") {
          this.rangeCanJoinUserSearch.appoint_group_select =
            this.range[name].toString();
        } else if (name == "appoint_level_select") {
          this.rangeCanJoinUserSearch.appoint_level_select =
            this.range[name].toString();
        } else if (name == "appoint_tag_select") {
          this.rangeCanJoinUserSearch.appoint_tag_select =
            this.range[name].toString();
        }
        this.getRangeCanJoinUserListWay();
      },
      getArrDifference(arr1, arr2) {
      return arr1.concat(arr2).filter(function (v, i, arr) {
        return arr.indexOf(v) === arr.lastIndexOf(v);
      });
    },
      //打开配置黑名单重复抽屉
      addConfig(title) {
        this.ifShowConfig = true;
        this.$nextTick(() => {
          if (title == "黑名单") {
            this.userIds = this.joinblackIds;
          } else if (title == "重复对象") {
            this.userIds = this.joinblackIds;
          }
          this.ConfigTitle = title;
        });
      },
      // 关闭配置黑名单重复抽屉
      closeConfig() {
        this.ifShowConfig = false;
        this.ifShowProductConfig = false;
      },
      //连续签到规则加减
      pushAward_rule() {
        this.taskForm.rule.push({
          id: this.taskForm.rule.length + new Date().getTime(),
          sing_day: '', //签到天数
          reward_type: [1, 2, 3], //奖励类型
          integral_num: '', //赠送积分
          conversion_rate: '', //积分转换卡百分比
          lottery_num: '', //赠送抽奖次数
        });
      },
      delAward_rule(row) {
        var arr = [];
        this.taskForm.rule.forEach((item) => {
          if (item.id !== row.id) {
            arr.push(item);
          }
        });
        this.taskForm.rule = arr;
      },
      // 提交按钮
      saveSubmit() {
        const p1 = new Promise((resolve, reject) => {
          this.$refs.basic.validate((valid, error) => {
            console.log(valid)
            if (valid) {
              resolve();
            } else {
              this.activeName = "first";
              reject({
                error: error,
                name: "first",
              });
              return;
            }
          });
        });
        const p2 = new Promise((resolve, reject) => {
          this.$refs.range.validate((valid, error) => {
            if (valid) {
              resolve();
            } else {
              reject({
                error: error,
                name: "second",
              });
              return;
            }
          });
        });
        const p3 = new Promise((resolve, reject) => {
          this.$refs.taskForm.validate((valid, error) => {
            if (valid) {
              const hasError = this.taskForm.rule.some(item => {

                console.log(item)
                return false
                if (item.sing_day === '') {
                  this.$messages.error("请输入连续签到天数");
                } else if (item.reward_type.length === 0) {
                  this.$messages.error("请选择奖励类型");
                } 
                else if (item.integral_num === '' && item.reward_type.includes("1") ) {
                  this.$messages.error("请输入赠送积分");
                } else if (item.lottery_num === '' && item.reward_type.includes("2") ){
                  this.$messages.error("请输入赠送抽奖次数");
                } else if (item.conversion_rate === '' && item.reward_type.includes("3")) {
                  this.$messages.error("请输入积分转换卡");
                } else {
                  return false; // No error for this item
                }
                this.activeName = "third";
                return true; // Error found
              });
              if (hasError) {
                reject(false);
              }
              resolve();
            } else {
              this.activeName = "third";
              reject({
                error: error,
                name: "third",
              });
              return;
            }
          });
        });
        const p4 = new Promise((resolve, reject) => {
          if (this.explain != "") {
            resolve();
          } else {
            if (this.activeName == "third") {
              this.$messages.error("请填写活动说明");
            }
            reject();
          }
          if (this.brief != "") {
            resolve();
          } else {
            if (this.activeName == "third") {
              this.$messages.error("请填写活动简介");
            }
            reject();
          }
        });

        Promise.all([p1, p2, p3, p4])
          .then(() => {
            let ranges = JSON.parse(JSON.stringify(this.range));
            ranges.user_black = this.joinblackIds.toString();
            if (ranges.appoint_area_select.length <= 0) {
              ranges.appoint_area_select = ''
            }
            ranges.appoint_group_select = ranges.appoint_group_select.toString();
            ranges.appoint_tag_select = ranges.appoint_tag_select.toString();
            ranges.appoint_level_select = ranges.appoint_level_select.toString();

            let explains = JSON.parse(JSON.stringify(this.explain)); //说明
            let brief = JSON.parse(JSON.stringify(this.brief)); //简介
            this.taskForm.rule.forEach(item => {
              if (Array.isArray(item.reward_type)) {
                item.reward_type = item.reward_type.join(",");
              }
            });
            let formdata = {
              explain: explains,
              description: brief,
              ...this.basic,
              ...this.taskForm,
              ...ranges,
            }
            if(this.editId) {
              formdata.id = this.editId
            }
            this.loading = true
            SaveSign(formdata).then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                this.$messages.error(res.msg);
                this.loading = false
                return;
              }
              this.loading = false
              this.closedinvitation()
              // console.log(res)
              // this.$messages.success(res.msg);
              // this.saveClose();
              // this.saveVisible = false;
              // this.getListWay();
            });
          })
      }
    }
  }
</script>
<style lang="scss">
  .drawer-layout {

    /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
    .el-drawer__body {
      overflow: auto;
    }

    /*2.隐藏滚动条，太丑了*/
    .el-drawer__container ::-webkit-scrollbar {
      display: none;
    }

    .el-drawer__header {
      background-color: #409eff;
      color: #ffffff;
      padding: 10px 20px;
      margin-bottom: 10px;
    }

    .el-tabs--card {
      height: calc(100vh - 110px);
      /* overflow-y: auto; */
    }

    .el-tab-pane {
      height: calc(100vh - 110px);
      overflow-y: auto;
    }

    .el-tabs__header {
      padding-left: 50px;
      margin: 0;
    }

    .el-tabs__item {
      padding: 0 40px;
    }

    .el-tabs__nav-wrap::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: #ffffff;
      z-index: 1;
    }

    .el-alert--warning.is-light .el-alert__description {
      color: #c77b04;
      font-size: 14px;
    }

    .form-box-item {
      .el-form-item__label {
        font-size: 14px;
        font-weight: 500;
        // width: 96px;
      }

      .el-input {
        width: 250px;
      }
    }
  }
</style>

<style lang="scss" scoped>
  .blockquote-box {
    border-left: 4px solid #409eff;
    padding-left: 16px;
    margin: 16px 0;
    height: 40px;
    line-height: 40px;
    background: #fafafa;
    font-size: 16px;
  }

  .form-box {
    margin: 0 20px;

    .form-box-item {
      padding-bottom: 10px;
      padding-right: 20px;
      font-size: 12px;
      color: #4c4c4c;

      .form-tip {
        font-size: 12px;
        color: #4c4c4c;

        .tip-key {
          font-weight: bold;
          text-decoration: underline;
        }
      }

      .form_text {
        display: inline-block;
        font-size: 14px;
        font-weight: 500;
        color: #606266;
        margin-left: 8px;
      }

      .form-product {
        display: flex;
        font-size: 12px;
        color: #ee3737;
      }

      .Instructions {
        background: #f6f6f6;
        border-radius: 4px;
        padding: 10px;
      }
    }

    .table-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;

      .table-top-left {
        display: flex;

        div {
          margin-right: 20px;
        }
      }

      .table-top-right {
        display: flex;

        div {
          margin-left: 20px;
        }
      }
    }

    .table-num {
      margin-left: 5px;
      background: #f0f0f0;
      width: 35px;
      border-radius: 5px;
    }
  }

  .button-box {
    margin-bottom: 20px;
    margin-right: 30px;

    .next-button {
      background-color: #eeeeee;
      color: #4c4c4c;
      height: 30px;
    }
  }
</style>
